<template>
  <el-input
    v-model="value1"
    placeholder=""
    clearable
    @blur="myblur"
    @change="mychange"
    @input="myinput"
    @clear="myclear"
    @keydown="mykeydown"
  >
  </el-input>
  <div v-if="model" style="display: none;">{{model[colName]}}</div>
</template>

<script>
  import {computed, customRef, useSlots, useAttrs } from 'vue'
  import { ElInput } from 'element-plus'
  import debounceRef from '../js/debounceRef.js'
 
</script>

<script setup>

  // 设置属性
  const props = defineProps({
    modelValue: [String, Number, Object],
    model: Object,
    colName: String
  })

  const emit = defineEmits(['update:modelValue'])
  
  console.log('props：', props)
  console.log('emit：', emit)

  const events = {
    run: () => {},
    clear: () => {}
  }
  const value1 = debounceRef(props, events, emit)

  // 在点击由 clearable 属性生成的清空按钮时触发
  const myclear = () => {
    events.run() // 立即执行
  }

  // 在 Input 值改变时触发
  const myinput = () => {

  }
  // 仅在输入框失去焦点或用户按下回车时触发
  const mychange = () => {
    events.run() // 立即执行
  }
  // 在 Input 失去焦点时触发
  const myblur = () => {
    events.run() // 立即执行
  }
  // 按键，用于汉字的连续输入
  const mykeydown = (e) => {
    // console.log('按键信息：', e)
    events.clear()
  }
</script>